import { Children, FC, ReactNode, PropsWithChildren } from "react";
import "./index.module.less";

const Header: FC<PropsWithChildren> = ({ children }) => {
  return <div className="common_page_header">{children}</div>;
};

const Content: FC<PropsWithChildren> = ({ children }) => {
  return <div className="common_page_content">{children}</div>;
};

const Footer: FC<PropsWithChildren> = ({ children }) => {
  return <div className="common_page_footer">{children}</div>;
};

interface CommonPageProps {
  className?: string;
}

const CommonPage: FC<PropsWithChildren<CommonPageProps>> & {
  Header: typeof Header;
  Footer: typeof Footer;
  Content: typeof Content;
} = ({ className, children }) => {
  const headerChildren: ReactNode[] = [];
  const contentChildren: ReactNode[] = [];
  const footerChildren: ReactNode[] = [];
  if (children) {
    Children.forEach<ReactNode>(children, (child: any) => {
      if (child && child.type) {
        if (child.type === Header) {
          headerChildren.push(child);
        } else if (child.type === Content) {
          contentChildren.push(child);
        } else if (child.type === Footer) {
          footerChildren.push(child);
        }
      }
    });
  }
  return (
    <div className={`common_page ${className || ""}`}>
      {headerChildren}
      {contentChildren}
      {footerChildren}
    </div>
  );
};

CommonPage.Header = Header;
CommonPage.Footer = Footer;
CommonPage.Content = Content;

export default CommonPage;
